<template>
  
  <table>
    <tr>
      <span style="color:white;background-color: red;border-radius: 10px;">{{ sleepData.earNumber }}</span>
      <span style="color:green;margin-left: 80px;background-color:greenyellow; border-radius: 10px;font-size: 12px;" v-if="sleepData.stayStatus==0" >待入场</span>
    </tr>
    <tr>
      <span style="color:blue">{{  }}</span>
      <span style="margin-left: 180px;">电子耳号：{{ sleepData.electronicEarTag }}</span>
    </tr>
  </table>
  <table style="margin-top: 20px;">
    <tr>
      <td style="font-weight: 80;font-size: 12px;padding-left: 25px">品种: <span v-if="sleepData.varietyId
==1">杜泊</span><span v-else-if="sleepData.varietyId
==2">澳洲白</span><span v-else-if="sleepData.varietyId
==3">萨福克</span><span v-else-if="sleepData.varietyId
==4">杜湖</span></td>
      <td style="padding-left: 103px;font-weight: 80;font-size: 12px;" v-if="sleepData.gender==1">性别: 男</td>
      <td style="padding-left: 93px;font-weight: 80;font-size: 12px;">父耳号:{{ sleepData.farEarNumber }}</td>
      <td style="padding-left: 93px;font-weight: 80;font-size: 12px;">母耳号:{{ sleepData.moEarNumber }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">出生日期:  {{ sleepData.sleepBirthDate
 }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">出生重:  {{ sleepData.sleepBirthWeight }}</td>
    </tr>
    <tr>
      <td style="font-weight: 80;font-size: 12px;">出生场地: {{ sleepData.sleepBirthPlace }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">断奶日龄:{{ }}</td>
      <td style="padding-left: 93px;font-weight: 80;font-size: 12px;">断奶重:{{  }}</td>
      <td style="padding-left: 105px;font-weight: 80;font-size: 12px;">日龄:  {{ sleepData.agetotal }}</td>
      <td style="padding-left: 105px;font-weight: 80;font-size: 12px;">月龄:{{  }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">同胎数:{{  }}</td>
    </tr>
    <tr>
      <td style="font-weight: 80;font-size: 12px;">生产等级:{{ sleepData.productLevel }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">基因等级:  {{ sleepData.grade }} </td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">销售等级:{{  }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">繁殖方式:{{  }}</td>
    </tr>
    <tr>
      <td style="font-weight: 80;font-size: 12px;">当前胎次:{{  }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">已产胎次:{{  }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">配种序号:{{  }}</td>
    </tr>
    <tr>
      <td style="font-weight: 90;font-size: 12px;padding-left: 14px">创建人:{{  }}</td>
      <td style="padding-left: 90px;font-weight: 80;font-size: 12px;">修改人:{{  }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">创建时间:{{  }}</td>
      <td style="padding-left: 80px;font-weight: 80;font-size: 12px;">修改时间:{{  }}</td>

    </tr>
  </table>
  <el-container>
    <el-header align="center" style="margin-top: 20px;">
    <div>
    <el-radio-group  size="large" style="margin-bottom: 20px;">
      <el-radio-button label="系谱" value="1" @click="sleepCard"  />
      <el-radio-button label="生产记录" value="2" @click="" />
      <el-radio-button label="转舍记录" value="3" />
      <el-radio-button label="健康记录" value="3" />
      <el-radio-button label="档案卡" value="3" />
    </el-radio-group>
  </div>
    </el-header>
  <el-main > 

       <RouterView/>
      </el-main>
    </el-container>





</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { ElTable } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
const route = useRoute();
const sleepData:any=ref([])

const getData=()=>{
  axios.get('http://localhost:5039/api/SleepBegin/GetSleepInfo?sleepInforId='+route.query.id).then(res=>{
    console.log(res)
    sleepData.value=res.data.item
  })
}
const sleepCard=()=>{
  router.push({
    name:'FamilyView',
    query:{
      id:route.query.id
    }
  })
}

onMounted(()=>{
  getData()
})
</script>